<template>
  <div>

    <p>当前:{{ utalk.userInfo.nickName }}</p>
    <p>联系人:{{ toUserInfo.nickName }}</p>
    <p>
      连接状态：<el-tag :type="utalk.isConnected ? 'success' : 'danger'">{{ utalk.isConnected ? '已连接' : '未连接' }}</el-tag>
    </p>
    <el-form ref="form" :model="form">
      <el-row :gutter="20">

        <el-col :span="4">
          <el-select v-model="form.msgType" placeholder="活动区域">
            <el-option label="文本" value="TEXT"></el-option>
            <el-option label="图片" value="IMAGE"></el-option>
          </el-select>
        </el-col>
        <el-col :span="16">
          <el-form-item>
            <el-input v-model="form.msgBody" placeholder="请输入你在发送的消息"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" v-on:click="sengMsg">发送消息</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="height: 70vh;overflow-y: scroll;padding: 1rem" class="msg-list">
      <div v-for="(item, index) in listHistory" :key="index"
        :style="{ textAlign: item.from === utalk.userInfo.userId ? 'right' : 'left' }">
        <div v-if="'TEXT' === item.msgType">
          <p> {{ item.msgBody }}</p>
        </div>

        <div v-if="'IMAGE' === item.msgType">
          <img :src="item.msgBody" style="max-width: 200px; max-height: 200px;" />
        </div>

        <el-tag type="info" size="small"> {{ $moment(item.time).format('YYYY-MM-DD HH:mm:ss') }} </el-tag>
        <el-divider direction="vertical"></el-divider>
        <el-tag type="info" size="small"> {{ item.from }} </el-tag>
        <el-divider direction="vertical"></el-divider>
        <el-tag size="small">{{ item.msgType }}</el-tag>
        <template v-if="item.from === utalk.userInfo.userId">
          <el-divider direction="vertical"></el-divider>
          <template v-if="!item.id">
            <el-tag v-if="item.error" type="danger" size="small">发送失败 </el-tag>
            <el-tag v-else type="info" size="small"> 发送中... </el-tag>
          </template>
          <template v-else>
            <el-tag type="success" size="small">发送成功 </el-tag>
          </template>

          <el-divider direction="vertical"></el-divider>
          <el-tag v-if="item.isRead === 'Y'" size="small">已读 </el-tag>
          <el-tag v-else size="small">未读 </el-tag>
        </template>
      </div>
    </div>




  </div>
</template>

<script>
export default {
  props: {
    utalk: Object,
    to: Object
  },
  data() {
    return {
      form: {
        msgBody: '',
        msgType: 'TEXT',
      },
      toUserInfo: this.to,
      listHistory: []
    }
  },
  mounted() {
    let _this = this;
    this.utalk.listenHistoryMsg(function (listHistory) {

      //listHistory.reverse() 方便调试，把消息倒序，对接的时候应该注意
      _this.listHistory = listHistory;
    });

    //初始化聊天窗口信息
    this.utalk.initSingleChat(
      this.to.userId,
      function (userInfo) {
        _this.toUserInfo = userInfo;
      }
    );
  },
  beforeUnmount() {
    console.log("The component is removed (beforeUnmount)!");
  },
  deactivated() {
    console.log("The component is removed (deactivated)!");
  },
  unmounted() {
    console.log("The component is removed (unmounted)!");
    //退出聊天，销毁监听
    this.utalk.destroyChat();
  },


  methods: {
    sengMsg() {
      if (this.form.msgType === 'IMAGE') {
        this.utalk.sendImageMsg(this.to.userId, this.form.msgBody)

      }

      if (this.form.msgType === 'TEXT') {
        this.utalk.sendTxtMsg(this.to.userId, this.form.msgBody)

      }
      return false;
    },
  },
  // 使用watch属性来监听list数组中元素的变化
  watch: {

  },
}

</script>
<style lang='scss' scoped></style>
